<template>
  <div class="w-full h-full box-border p-7 pb-10 scrollbarY">
    <div
      v-for="(item, index) in cameras"
      :key="item.id"
      class="w-full aspect-video bg-[#EFF0F6] relative cursor-grab"
      :class="{ 'mt-10': index !== 0 }"
      draggable="true"
      @dragstart="onDragStart(item)"
    >
      <div class="w-full aspect-video bg-[#EFF0F6] overflow-hidden relative">
        <img :src="item.pic" class="w-full h-full object-cover" />
        <!-- 当isProcessing为false时显示已预处理覆盖层 -->
        <div
          v-if="!isProcessing"
          class="absolute inset-0 bg-black/40 flex items-center justify-center transition-opacity duration-300"
        >
          <div class="text-white font-medium flex flex-col items-center">
            <span class="icon-[material-symbols--check-circle] text-2xl text-green-400 mb-1"></span>
            <span class="text-sm">已预处理</span>
          </div>
        </div>
      </div>
      <div class="absolute text-xs -bottom-6 text-center left-1/2 -translate-x-1/2">
        IP: {{ item.ip }}
      </div>
      <div class="absolute bottom-2 right-2">
        <a-checkbox v-model:checked="item.isChecked"></a-checkbox>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCameraStore } from '@renderer/stores/camera'

const draggedCamera = defineModel('camera')
const isProcessing = defineModel('isProcessing')
const cameraStore = useCameraStore()
const cameras = cameraStore.cameras

function onDragStart(item: any) {
  draggedCamera.value = item
}
</script>

<style scoped></style>
